<template>
  <div class="home-header">
    <div class="header-left">
      <div class="header-logo" style="margin-right: 20px">
        <img src="../../assets/logo.png" height="56" width="56" style="padding-right: 5px"/>
        <div>Eoffice</div>
      </div>
      <div class="header-nav">
        <!--<router-link to="/">返回首页</router-link> |-->
        <!--<router-link to="/menu">Menu</router-link> |-->
        <!--<router-link to="/admin">Admin</router-link> |-->
        <!--<router-link to="/about">About</router-link>-->
        <!--<el-menu-->
        <el-menu router mode="horizontal" class="nav-menu"
                 background-color="#409EFF"
                 text-color="#ffffff"
                 active-text-color="yellow"
                 :default-active="defaultActivePath"
                 @select="handleSelect">
          <el-menu-item index="/home">返回首页</el-menu-item>
          <el-menu-item index="/system">系统管理</el-menu-item>
          <el-menu-item index="/hr">人力资源系统</el-menu-item>
          <el-menu-item index="/about">关于</el-menu-item>

          <!--<template v-for="(item, index) in routes">-->
          <!--  <el-menu-item v-if="item.children" :index="item.path" :key="index">-->
          <!--    {{ item.name }}</el-menu-item>-->
          <!--</template>-->
          <!--<el-menu-item  v-for="(item, index) in menuData" :index="item.path" :key="index">{{ item.name }}</el-menu-item>-->
        </el-menu>
      </div>
    </div>
    <div class="header-right">
      <div class="header-userinfo">
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
import store from '@/store';

export default defineComponent({
  name: 'HomeHeader',
  components: {},
  setup () {
    // 1. 准备基础数据
    // const _menuDataMap = [];
    const menuData = computed(() => {
      const menuData: any = [];
      const _allMenuData: any = store.state.original_menus;
      console.log('HomeHeader >>> setup() >> menuData = ', _allMenuData);
      if (_allMenuData != null && _allMenuData.length > 0) {
        _allMenuData.forEach((item: any) => {
          // _menuDataMap[item.path] = item;
          if (item.menuParentId == null) {
            menuData.push(item);
          }
        });
      }
      return menuData;
    });
    const defaultActivePath = ref('/home');
    // 2. 准备相关的方法函数
    const handleSelect = (path: any, key: any) => {
      console.log('HomeHeader >>> click on module menu：', path, key);
      // 点击模块的时候，锁定二级模块的菜单树
      let moduleMenuData: any = [];
      const _routesTree: any = store.state.menuTree;
      // console.log('HomeHeader >>> setup() >> all routesTree = ', _routesTree);
      if (_routesTree != null && _routesTree.length > 0) {
        _routesTree.forEach((item: any) => {
          // _menuDataMap[item.path] = item;
          if (item.path === path) {
            moduleMenuData = item.children;
          }
        });
      }
      store.commit('INIT_MODULE_MENU', moduleMenuData);
    };

    // 3. 挂载时初始化
    onMounted(() => {
      // 初始化数据
      // console.log('HomeHeader >>> setup() >> onMounted() > store中的routes[] = ', routes);
    });

    // 4. 将双向绑定数暴露给页面使用
    return {
      menuData,
      defaultActivePath,
      handleSelect
    };
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.home-header {
  display: flex;
  align-items: center;
  align-content: center;
  background-color: #409EFF;
  //box-sizing: border-box;//ant-layout默认就是border-box
  box-shadow: 0 5px 12px 0 rgba(97, 97, 97, 0.05);
  color: white;
  height: 60px;
  line-height: 60px;
  justify-content: space-between;
  padding: 0 15px;
  .header-left{
    display: flex;
    .header-logo {
      display: flex;
      width: 160px;
    }
    .header-nav {
      .nav-menu{
        //background-color: transparent !important;
      }
    }
  }
  .header-right {
    .header-userinfo {
      display: flex;
      align-items: center;
      //width: 100px;
      cursor: pointer;
      //background-color: aqua;
      .el-dropdown-link {
        display: flex;
        align-items: center;
      }
      .user-info {
        color: #FFFFFF;
      }
      .user-face {
        border-radius: 21px;
        height: 42px;
        margin-left: 5px;
        width: 42px;
      }
    }
  }
}
</style>
